<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="showDialog"
    :title="title"
    :destroy-on-close="true"
    @close="onCloseDialog"
    width="50%"
  >
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="基本信息" name="essentialInfo">
        <el-form :model="formTerminalFaceData" ref="formTerminalFaceData" label-width="100px">
          <el-form-item label="设备名称">
            <el-input
              v-model="formTerminalFaceData.deviceName"
              placeholder="设备名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              v-model="formTerminalFaceData.deviceTypeId"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.deviceTypeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="自动更新">
            <el-switch v-model="isUpgrade" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch v-model="isStatus" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="deviceFaceInfoUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="其他设置" name="otherSettings">
        <el-form
          :model="formTerminalData"
          ref="formTerminalData"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="设备位置">
            <el-select v-model="sluiceType" clearable placeholder="请选择" style="width: 240px">
              <el-option
                v-for="dict in formatDictMap('GATE_DIR_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="进出类型">
            <el-select
              v-model="formTerminalData.sysDeviceFaceOtherSetVO.accessType"
              clearable
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="dict in formatDictMap('GATE_ACCESS_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="扣费方式">
            <el-select v-model="formTerminalData.sysDeviceFaceOtherSetVO.deductionMode" clearable placeholder="请选择"
                       size="small">
              <el-option
                v-for="dict in formatDictMap('SYS_PAY_SORT')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="刷卡方式">
            <el-select v-model="formTerminalData.sysDeviceFaceOtherSetVO.swipeMode" clearable placeholder="请选择"
                       size="small">
              <el-option
                v-for="dict in formatDictMap('SWIPE_MODE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"/>
            </el-select>
          </el-form-item> -->
          <el-form-item label="工作模式">
            <el-select v-model="workMode" clearable placeholder="请选择" style="width: 240px">
              <el-option
                v-for="dict in formatDictMap('FACE_WORK_MODE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="滴卡扣币数量">
            <el-input
              v-model="formTerminalData.sysDeviceFaceOtherSetVO.coinDeductionCount"
              placeholder="滴卡扣币数量"
              clearable
              size="small"
            />
          </el-form-item>

          <el-divider content-position="left">人脸支持刷闸方式</el-divider>
          <div
            v-for="(item, index) in formTerminalData.sysDeviceFaceOtherSetVO.checkBrushSetList"
            :key="index"
          >
            <el-row>
              <el-col :span="4">
                <el-input
                  v-model="item.sort"
                  placeholder="顺序"
                  clearable
                  size="small"
                  :disabled="true"
                >
                  <template #prepend>顺序</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-select v-model="item.checkType" clearable placeholder="请选择" size="small">
                  <el-option
                    v-for="dict in formatDictMap('GATE_CHECK_BRUSH_TYPE')"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="2">
                <el-switch v-model="item.isCheck" active-color="#13ce66" inactive-color="#ff4949" />
              </el-col>
            </el-row>
          </div>

          <el-divider content-position="left">人脸支持刷票方式</el-divider>
          <div
            v-for="(item, index) in formTerminalData.sysDeviceFaceOtherSetVO.checkTicketSetList"
            :key="index"
          >
            <el-row>
              <el-col :span="4">
                <el-input
                  v-model="item.sort"
                  placeholder="顺序"
                  clearable
                  size="small"
                  :disabled="true"
                >
                  <template #prepend>顺序</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-select v-model="item.checkType" clearable placeholder="请选择" size="small">
                  <el-option
                    v-for="dict in formatDictMap('GATE_CHECK_TICKET_TYPE')"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="2">
                <el-switch v-model="item.isCheck" active-color="#13ce66" inactive-color="#ff4949" />
              </el-col>
            </el-row>
          </div>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="设备参数" name="deviceSettings">
        <el-form
          :model="formTerminalData"
          ref="formTerminalData"
          :inline="true"
          label-width="150px"
        >
          <el-form-item label="人脸注册相似度阀值">
            <el-input
              v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.registerThreshold"
              placeholder="人脸注册相似度阀值"
              clearable
              size="small"
              v-only-number="{ max: 100, min: 0, precision: 0 }"
            />
          </el-form-item>
          <el-form-item label="人脸识别相似度阀值">
            <el-input
              v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.recgThreshold"
              placeholder="人脸识别相似度阀值"
              clearable
              size="small"
              v-only-number="{ max: 100, min: 0, precision: 0 }"
            />
          </el-form-item>
          <el-form-item label="活体检测阈值">
            <el-input
              v-model="
                formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.livingDetectThresholdScore
              "
              placeholder="活体检测阈值"
              clearable
              size="small"
              v-only-number="{ max: 100, min: 0, precision: 0 }"
            />
          </el-form-item>
          <el-form-item label="口罩阈值">
            <el-input
              v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.maskThresholdValue"
              placeholder="口罩阈值"
              clearable
              size="small"
              v-only-number="{ max: 100, min: 0, precision: 0 }"
            />
          </el-form-item>
          <el-form-item label="识别距离">
            <el-input
              v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.recgDistance"
              placeholder="识别距离"
              clearable
              size="small"
              v-only-number="{ max: 150, min: 0, precision: 0 }"
            />
          </el-form-item>
          <el-form-item label="音量">
            <el-input
              v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.volume"
              placeholder="音量"
              clearable
              size="small"
              v-only-number="{ max: 100, min: 0, precision: 0 }"
            />
          </el-form-item>
          <el-form-item label="继电器时长(ms)">
            <el-input
              v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.relayDelay"
              placeholder="继电器时长(ms)"
              clearable
              size="small"
              v-only-number="{ max: 100000, min: 0, precision: 0 }"
            />
          </el-form-item>
          <el-form-item label="重复识别间隔(ms)">
            <el-input
              v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.recgInterval"
              placeholder="重复识别间隔(ms)"
              clearable
              size="small"
              v-only-number="{ max: 100000, min: 0, precision: 0 }"
            />
          </el-form-item>
          <el-form-item label="扫码间隔(ms)">
            <el-input
              v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.qrCheckInterval"
              placeholder="扫码间隔(ms)"
              clearable
              size="small"
              v-only-number="{ max: 100000, min: 0, precision: 0 }"
            />
          </el-form-item>

          <el-row>
            <el-form-item label="人脸核验成功语音">
              <el-radio-group
                size="medium"
                v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.faceCheckSucVoice"
              >
                <el-radio-button label="0">无语音</el-radio-button>
                <el-radio-button label="1">播放默认语音</el-radio-button>
                <el-radio-button label="2">播放自定义语音</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-input
                v-if="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.faceCheckSucVoice == 2"
                v-model="
                  formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.faceCheckSucVoiceData
                "
                placeholder="人脸核验成功自定义语音内容"
                clearable
                size="small"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="人脸核验失败语音">
              <el-radio-group
                size="medium"
                v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.faceCheckFailedVoice"
              >
                <el-radio-button label="0">无语音</el-radio-button>
                <el-radio-button label="1">播放默认语音</el-radio-button>
                <el-radio-button label="2">播放自定义语音</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-input
                v-if="
                  formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.faceCheckFailedVoice == 2
                "
                v-model="
                  formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.faceCheckFailedVoiceData
                "
                placeholder="人脸核验失败自定义语音内容"
                clearable
                size="small"
              />
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="刷卡核验成功语音">
              <el-radio-group
                size="medium"
                v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.cardCheckSucVoice"
              >
                <el-radio-button label="0">无语音</el-radio-button>
                <el-radio-button label="1">播放默认语音</el-radio-button>
                <el-radio-button label="2">播放自定义语音</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-input
                v-if="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.cardCheckSucVoice == 2"
                v-model="
                  formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.cardCheckSucVoiceData
                "
                placeholder="刷卡核验成功自定义语音内容"
                clearable
                size="small"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="刷卡核验失败语音">
              <el-radio-group
                size="medium"
                v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.cardCheckFailedVoice"
              >
                <el-radio-button label="0">无语音</el-radio-button>
                <el-radio-button label="1">播放默认语音</el-radio-button>
                <el-radio-button label="2">播放自定义语音</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-input
                v-if="
                  formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.cardCheckFailedVoice == 2
                "
                v-model="
                  formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.cardCheckFailedVoiceData
                "
                placeholder="刷卡核验失败语音自定义语音内容"
                clearable
                size="small"
              />
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="扫码核验成功语音">
              <el-radio-group
                size="medium"
                v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.qrCheckSucVoice"
              >
                <el-radio-button label="0">无语音</el-radio-button>
                <el-radio-button label="1">播放默认语音</el-radio-button>
                <el-radio-button label="2">播放自定义语音</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-input
                v-if="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.qrCheckSucVoice == 2"
                v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.qrCheckSucVoiceData"
                placeholder="扫码核验成功语音自定义语音内容"
                clearable
                size="small"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="扫码核验失败语音">
              <el-radio-group
                size="medium"
                v-model="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.qrCheckFailedVoice"
              >
                <el-radio-button label="0">无语音</el-radio-button>
                <el-radio-button label="1">播放默认语音</el-radio-button>
                <el-radio-button label="2">播放自定义语音</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-input
                v-if="formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.qrCheckFailedVoice == 2"
                v-model="
                  formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.qrCheckFailedVoiceData
                "
                placeholder="扫码核验失败语音自定义语音内容"
                clearable
                size="small"
              />
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="开启活检">
              <el-switch v-model="livingEnable" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>
            <el-form-item label="红外图像">
              <el-switch v-model="infraredEnable" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>
            <el-form-item label="口罩检测">
              <el-switch
                v-model="maskDetectEnable"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="口罩识别">
              <el-switch v-model="maskEnable" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>
            <el-form-item label="重复识别">
              <el-switch
                v-model="repeatRecgEnable"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
          </el-row>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { deviceAction } from '@/api/device/device.js';
  import { deviceTypeList } from '@/api/device/type.js';
  import { ElMessage } from 'element-plus';
  import { getDictOptions } from '@/utils/dict';

  export default {
    name: 'DialogFaceTerminal',
    dicts: [
      'SWIPE_MODE',
      'SYS_PAY_SORT',
      'FUNCTION_SWITCH_TYPE',
      'GATE_DIR_TYPE',
      'GATE_ACCESS_TYPE',
      'FACE_WORK_MODE',
      'GATE_CHECK_BRUSH_TYPE',
      'GATE_CHECK_TICKET_TYPE',
    ],
    props: {
      dialog: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '终端设置',
      },
      deviceId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        payModecheckboxGroup: [],
        activeName: 'essentialInfo',
        //        showDialog: false,
        isUpgrade: true,
        isStatus: true,
        livingEnable: true,
        infraredEnable: true,
        maskDetectEnable: true,
        maskEnable: true,
        repeatRecgEnable: true,
        sluiceType: '1',
        workMode: '3',
        formTerminalFaceData: {
          sysDeviceFaceOtherSetVO: {
            swipeMode: 'ALL_MODE',
            deductionMode: 'COIN',
            sluiceType: 1,
            accessType: '1',
            workMode: 3,
          },
        },
        formTerminalData: {
          sysDeviceFaceOtherSetVO: {
            swipeMode: 'ALL_MODE',
            deductionMode: 'COIN',
            sluiceType: 1,
            accessType: '1',
            workMode: 3,
            deviceConfig: {
              recgThreshold: 54,
              registerThreshold: 68,
              living: 1,
              infraredEnable: 0,
              livingDetectThresholdScore: 10,
              maskDetectEnable: 0,
              maskEnable: 0,
              maskThresholdValue: 53,
              recgDistance: 150,
              volume: 100,
              relayDelay: 2000,
              repeatRecgEnable: 0,
              recgInterval: 2500,
              qrCheckInterval: 1000,
              faceCheckSucVoice: 1,
              faceCheckSucVoiceData: '人脸认证成功',
              faceCheckFailedVoice: 1,
              faceCheckFailedVoiceData: '人脸认证失败',
              cardCheckSucVoice: 1,
              cardCheckSucVoiceData: '刷卡认证成功',
              cardCheckFailedVoice: 1,
              cardCheckFailedVoiceData: '刷卡认证失败',
              qrCheckSucVoice: 1,
              qrCheckSucVoiceData: '扫码认证成功',
              qrCheckFailedVoice: 1,
              qrCheckFailedVoiceData: '扫码认证失败',
            },
          },
        },

        deviceTypeList: [],
      };
    },
    computed: {
      showDialog() {
        return this.dialog;
      },
    },
    watch: {},
    created() {
      this.getDeviceFaceDetails();
      //设备类型列表
      deviceTypeList({}).then((res) => {
        this.deviceTypeList = res;
      });
    },
    methods: {
      // 格式化字典
      formatDictMap(dictEnum) {
        return getDictOptions(dictEnum);
      },
      // 表单重置
      reset() {},
      //终端设置
      getDeviceFaceDetails() {
        deviceAction('FACE', 'getDeviceFaceDetails', this.deviceId).then((response) => {
          this.formTerminalData = response;
          this.formTerminalFaceData = response;
          this.payModecheckboxGroup = response.payModecheckboxGroup;

          this.isStatus = this.formTerminalFaceData.isStatus === 0;
          this.isUpgrade = this.formTerminalFaceData.isUpgrade === 1;

          this.livingEnable =
            this.formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.living === 1;
          this.infraredEnable =
            this.formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.infraredEnable === 1;
          this.maskDetectEnable =
            this.formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.maskDetectEnable === 1;
          this.maskEnable =
            this.formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.maskEnable === 1;
          this.repeatRecgEnable =
            this.formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.repeatRecgEnable === 1;
          this.sluiceType = this.formTerminalData.sysDeviceFaceOtherSetVO.sluiceType.toString();
          this.workMode = this.formTerminalData.sysDeviceFaceOtherSetVO.workMode.toString();
        });
      },
      //设备信息修改
      deviceFaceInfoUpdate() {
        this.formTerminalFaceData.isStatus = this.isStatus === true ? 0 : 1;
        this.formTerminalFaceData.isUpgrade = this.isUpgrade === true ? 1 : 0;
        deviceAction('DEVICE', 'updateDevice', this.formTerminalFaceData).then((response) => {
          if (response) {
            ElMessage({
              message: '操作成功！',
              type: 'success',
            });
            this.$emit('submit');
          } else {
            ElMessage({
              message: response.msg,
              type: 'error',
            });
          }
        });
      },
      //参数修改
      configureUpdate() {
        this.formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.living =
          this.livingEnable === true ? 1 : 0;
        this.formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.infraredEnable =
          this.infraredEnable === true ? 1 : 0;
        this.formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.maskDetectEnable =
          this.maskDetectEnable === true ? 1 : 0;
        this.formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.maskEnable =
          this.maskEnable === true ? 1 : 0;
        this.formTerminalData.sysDeviceFaceOtherSetVO.deviceConfig.repeatRecgEnable =
          this.repeatRecgEnable === true ? 1 : 0;
        this.formTerminalData.sysDeviceFaceOtherSetVO.sluiceType = parseInt(this.sluiceType);
        this.formTerminalData.sysDeviceFaceOtherSetVO.workMode = parseInt(this.workMode);
        deviceAction('FACE', 'getDeviceFaceSetOtherInfoUpdate', this.formTerminalData).then(
          (response) => {
            if (response) {
              ElMessage({
                message: '操作成功！',
                type: 'success',
              });
              this.$emit('submit');
            } else {
              ElMessage({
                message: response.msg,
                type: 'error',
              });
            }
          },
        );
      },
      onCloseDialog() {
        this.$emit('close');
      },
    },
  };
</script>

<style scoped></style>
